<template>
  <div class="centerSprite">
    <div id="header">
      <Header />
    </div>
    <div class="centerList">
      <HeaderSide />
      <div class="container">
        <div class="reportEntry">
          <div class="reportForm">
            <h3>反腐倡廉</h3>
            <form action="index.php?g=api&amp;m=xinfangjubao&amp;a=addmsg" method="post" class="form-horizontal js-ajax-forms" enctype="multipart/form-data" novalidate="novalidate">
              <input type="hidden" name="type" id="reportDesc">
              <div class="formItem">
              <div class="formItemTitle">
                问题类别:
              </div>
              <select name="type" class="valid" aria-invalid="false" style="width:400px;">
                <option value="">-请选择-</option>
                <option value="公款大吃大喝">公款大吃大喝</option>
                <option value="公款旅游（国内）">公款旅游（国内）</option>
                <option value="公款出国（境）旅游">公款出国（境）旅游</option>
                <option value="违规配备使用公车">违规配备使用公车</option>
                <option value="违规建设楼堂馆所">违规建设楼堂馆所</option>
                <option value="津贴补贴违规问题">津贴补贴违规问题</option>
                <option value="违规收送礼品礼金">违规收送礼品礼金</option>
                <option value="大办婚丧喜庆事宜">大办婚丧喜庆事宜</option>
                <option value="接受或用公款参与高消费娱乐健身活动">接受或用公款参与高消费娱乐健身活动</option> <option value="违规出入私人会所">违规出入私人会所</option> <option value="其他">其他</option> </select>
              </div>
              <div class="formItem"> <div class="formItemTitle">                            举报标题:
          </div>
              <input type="text" style="width:400px;" name="title" id="title" required="" value="" placeholder="请输入举报标题" aria-required="true">
              <span class="form-required">*</span>
            </div>
              <div class="formItem formReportContent">
                <div class="formItemTitle ">
                  举报内容:
                  <div style="font-size: 12px;line-height: 20px;height: 20px;padding: 0px;margin: 0px;">（剩余<span id="num">500</span>字）</div>
                </div>
                <textarea name="msg" id="textarea" style="width:374px;resize: vertical;" value="20字以上，500字以内"></textarea> </div>
              <div class="formItem">
                <div class="formItemTitle">问题所属公司: </div>
                 <input type="text" style="width:400px;" name="company_name" id="company_name" required="" value="" placeholder="请输入问题所属公司" aria-required="true">
                <span class="form-required">*</span> </div>
              <div class="formItem">
                <div class="formItemTitle">
                  被反映对象:
                  </div>
              <input type="text" style="width:400px;" name="beifanyingduixiang" id="beifanyingduixiang" required="" value="" placeholder="请输入被反映部门名称" aria-required="true">
                <span class="form-required">*</span>
              </div>
              <div class="formItem">
                <div class="formItemTitle"> 职级:</div>
                <input type="text" style="width:400px;" name="zhiji" id="zhiji" required="" value="" placeholder="请输入职级" aria-required="true">
                <span class="form-required">*</span>
              </div>
              <div class="formItem">
                  <div class="formItemTitle"> 图片上传:</div>
                  <div class="formUploader">
                    <span  id="addEnclosure" @click="addPic">添加图片</span>
                    <input
                      type="file" accept="image/jpeg,image/jpg,image/png,image/gif"
                      id="fileInput" name="imageFile" ref="fileInput" @change="emitAddPic">

                  </div>
              </div>
              <div class=" weui-cells_form ">
                <div class="weui-uploader">
                  <div class="weui-uploader__bd">
                    <ul class="weui-uploader__files" id="uploaderFiles" ref="uploaderFiles">
                        <li class="weui-uploader__file" v-for="(item,index) in picArray" :style="{backgroundImage:'url('+item.pic+')'}">
                           <span class="deletIcon" @click.stop="deleteIcon(index)"></span>
                        </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="formItem">
                <div class="formItemTitle"> 视频上传:</div>
                <div class="formUploader">
                  <span  id="addEnclosure2" @click="addVideo">添加视频</span>
                  <input type="file" accept="video/"
                    id="fileInput2" name="videoFile" ref="fileInput2" @change="emitAddPic2">
                </div>
              </div>
              <div class=" weui-cells_form ">
                <div class="weui-uploader">
                  <div class="weui-uploader__bd">
                    <ul class="weui-uploader__files" id="uploaderFiles2" ref="uploaderFiles2">
                      <li class="weui-uploader__file" v-for="(item,index) in videoArray" @click.stop="videoPlay(index)">
                        <video  :src="item.pic" object-fit="cover" ></video>
                        <span class="deletIcon" @click.stop="deleteIcon2(index)"></span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
                <p class="reportButton">
                  <input type="button" value="我要举报" id="submit"  @click.stop="sub();">
                </p>
            </form>
          </div>
        </div>

      </div>
      <div id="footer">
        <Footer />
      </div>
    </div>
  </div>
</template>

<script>
  import header from  '../components/header.vue'
  import footer from '../components/footer.vue'
  import headerSide from '../components/side.vue'
  import * as qiniu from 'qiniu-js'
  export default({
    data(){
      return {
        picArray:[],
        videoArray:[],
        tempImgArray:[],
        tempVideoArray:[],
      }
    },
    computed:{

    },
    components:{
      Header:header,
      Footer:footer,
      HeaderSide:headerSide
    },
    methods:{
      videoPlay(index){
        this.videoArray[index].pic.play()
      },
      sub(){
        if(
          this.questionItem&&
          this.company &&
          this.text&&
          this.rank&&
          this.departement
          &&this.title
        ){
          if(this.tempImgArray.length>0){
            var str =''
            if(this.tempImgArray.length>=4){
              for(var i=0;i<3;i++){
                str +=this.tempImgArray[i]
              }
            }
            str +=this.tempImgArray[this.tempImgArray.length-1]
          }
          if(this.tempVideoArray.length>0){
            var str2 =''
            if(this.tempVideoArray.length>=4){
              for(var i=0;i<3;i++){
                str2 +=this.tempVideoArray[i]
              }
            }
            str2 +=this.tempVideoArray[this.tempVideoArray.length-1]
          }
          this.axios.post('/home/Report/report',{
            question_type:this.questionItem,
            title:this.title,
            content:this.text,
            belong_company:this.company,
            belong_dept: this.departement,
            rank:this.rank,
            img:str,
            video:str2,
          }).then((res)=>{
            console.log(res)
            if(res.data.code==1){
              this.alarm ='举报成功,2s后返回首页'
              this.showAlarm =true
              setTimeout(()=>{
                this.$router.push({
                  path:'/index'
                })
              },2000)
            }else{
              this.alarm =res.data.msg
              this.showAlarm =true
            }
          }).catch((err)=>{
            console.log(err)
            this.alarm ='举报失败,请刷新浏览器后再重新上传'
          })
        }else{
          this.alarm ='请完善举报信息'
          this.showAlarm =true
        }
      },
      uploadFile(){
        console.log(123)
      },
      cancel (){
        this.showAlarm =false
      },
      confirm (){
        this.showAlarm =false
      },
      count(e){
        if(e.keyCode ==32){
          this.num = 500-this.text.length
          if(this.text.length>=500){
            e.preventDefault();
            this.text =this.text.substr(0,500);
            this.num =0
          }
        }else if(e.keyCode ==8){
          this.defaultId--;
          this.num  =500-this.text.length
        }else{
          this.defaultId++;
          this.num  =500-this.text.length
          if(this.text.length>=500){
            e.preventDefault();
            this.text =this.text.substr(0,500);
            this.num =0;
          }
        }
      },
      emitAddPic(){
        this.addPic()
      },
      emitAddPic2(){
        this.addVideo()
      },
      deleteIcon(index){
        this.picArray.splice(index,1)
      },
      deleteIcon2(index){
        this.videoArray.splice(index,1)
      },
      addPic(){
        var files =this.$refs.fileInput.files
        let that =this
        var url = window.URL || window.webkitURL || window.mozURL ;
        if(files[0]){
          that.loading =true
          var observable = qiniu.upload(files[0], null, this.token,null)
          var observer = {
            next(res){
              console.log(res)
            },
            error(err){
              console.log(err)
              that.loading =false

            },
            complete(res){
              var str ='http://pft5fctao.bkt.clouddn.com/'+ res.hash+'#'
              that.loading =false
              console.log(that.tempImgArray)
              that.tempImgArray[that.tempImgArray.length] =str
            }
          }
          var subscription = observable.subscribe(observer) // 上传开始
          if(files[0].size/1024>5120){
            this.showAlarm =true
            this.alarm='上传文件不得超过5M'
            return false
          }
        }
        if(this.picArray.length>3){
          this.picArray[3].pic =url.createObjectURL(files[0])
        }else{
          for(var i=0;i<files.length;i++){
            this.picArray.push({
              pic:url.createObjectURL(files[0])
            })
          }
        }
      },
      addVideo(){
        let that =this
        var files =this.$refs.fileInput2.files
        var url = window.URL || window.webkitURL || window.mozURL ;
        if(files[0]){
          that.loading =true
          if(files[0].size/1024>51200){
            this.showAlarm =true
            this.alarm='上传文件不得超过5M'
            return  false
          }
          var observable = qiniu.upload(files[0], null, this.token,null)
          var observer = {
            next(res){
              console.log(res)
            },
            error(err){
              console.log(err)

            },
            complete(res){
              that.loading =false
              var str ='http://pft5fctao.bkt.clouddn.com/'+ res.hash+'#'
              console.log(that.tempVideoArray.length)
              that.tempVideoArray[that.tempVideoArray.length] =str
            }
          }
          var subscription = observable.subscribe(observer) // 上传开始
        }
        if(this.videoArray.length>3){
          this.videoArray[3].pic =url.createObjectURL(files[0])
        }else{
          for(var i=0;i<files.length;i++){
            console.log(url.createObjectURL(files[0]))
            this.videoArray.push({
              pic:url.createObjectURL(files[0])
            })
          }
        }
      }
    }
  })
</script>
<style   >

  .breadClum a{
    font-size:16px;
    color:#6d6d6d;
  }
  .headerSide .container{
    overflow: hidden;
  }
  .centerList{
    background-image:url("../../static/images/list.jpg");
    background-position: center;
    background-repeat: no-repeat;
    height: 1100px;
    /*margin-top: -156px;*/
  }
  .centerList .container{
    height: auto;
  }
/*.headerSide .container  ul{*/
  /*background: rgba(0,0,0,0.4) !important; ;*/
/*}*/
/*.headerSide .container ul li.first{*/
  /*font-size: 36px;*/
  /*color: red !important;*/
/*}*/
/*.headerSide .container ul li.first a{*/
  /*font-size: 36px;*/
/*}*/
.reportEntry{
  width: 690px;
  margin: 0 auto;
}
  .reportForm h3 {
    color: #fff;
    font-size: 24px;
    text-align: center;
    background-image: url("../../static/images/ffclTab.jpg");
    height: 74px;
    line-height: 74px;
  }
  .reportForm form{
    margin-top: 20px;
  }
  .reportButton{
    padding-bottom: 147px;
    margin-top: 35px;
    margin-left: 190px;
  }
  .reportButton input{
    display: inline-block;
    width: 329px;
    height: 36px;
    line-height: 36px;
    font-size: 18px;
    color: #ffffff;
    background: #db281b;
    border-radius: 7px;
    -webkit-border-radius: 7px;
  }
  .reportPoint .p1{
    color: #003399;
    font-size: 24px;
    text-align: center;
    padding-bottom: 32px;
  }
  .reportPoint .p2{
    text-indent: 2em;
    font-size: 18px;
    color: #333333;
  }
  .reportPoint .p3{
    text-align: center;
    margin-top: 75px;
  }
  #androidDialog1{
    display: none
  }
  .reportPoint .p3 label{
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
  }
  .reportPoint .p3 input{
    display: inline-block;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    font-size: 0;
    border: 1px solid #d1d1d1;
    background-color: #fff;
    border-radius: 3px;
    width: 22px;
    height: 22px;
    position: relative;
    top: 2px;
    border: 1px solid #f2a096 !important;
    cursor: pointer;
  }
  .reportPoint .p3 input:checked:before{
    font-family: weui;
    font-style: normal;
    font-weight: 600;
    font-variant: normal;
    text-transform: none;
    text-align: center;
    speak: none;
    display: inline-block;
    vertical-align: middle;
    text-decoration: inherit;
    content: "\EA08";
    color: #09bb07;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-48%) scale(.73);
    transform: translate(-50%,-48%) scale(.73);
  }
  .reportPoint .p3 input:checked:before {
    color: #e33123 !important;
  }
  #select{
    margin:100px;
    background: rgba(0,0,0,0);
    width: 249px;
    height: 40px;
    font-size: 18px;
    color: white;
    border: 1px #1a1a1a solid;
    border-radius: 5px;
  }
  .select-head,.formItem input{
    overflow: hidden;
    width: 320px;
    height: 40px;
    box-sizing: border-box;
    line-height: 40px;
    border:1px solid #d9d9d9;
    vertical-align: top;
  }
  .select-head,.formItem select{
    overflow: hidden;
    width: 320px;
    height: 40px;
    box-sizing: border-box;
    line-height: 40px;
    border:1px solid #d9d9d9;
    vertical-align: top;
    padding-left: 14px;
  }
  .select-head .select-head-cont{
    float: left;
    width: 288px;
    overflow: hidden;
    text-indent: 13px;
  }
  .select-head .select-icon{
    float: right;
    margin-right: 16px;
    color: #ccc;
  }
  .option{
    text-indent: 10px;
    margin-top: 1px;
    width: 100%;
    color: black;
    background: white;
    line-height: 25px;
    border: 1px #cfcfcf solid;
    display: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  .option-item:hover{
    background: #f7f7f7;
  }
  .formItem{
    margin-bottom: 20px;
  }
  .formItem .formItemTitle,.formItem #selectUlContent,.formItem .uploaderInput{
    display: inline-block;

  }
  .formItem .formItemTitle {
    width: 180px;
    text-align: right;
    font-size: 18px;
    color: #000000;
    height: 40px;
    line-height: 40px;
    vertical-align: top;
    margin-right: 15px;

  }
  .formItem  input{
    text-indent: 14px;
  }
  .formReportContent{
    /*height: 190px;*/
  }
  .formItemTitle p{
    color: #666;
    padding-top: 10px;
  }
  .formReportContent textarea{
    padding:  0 12px;
    width: 296px;
    height: 100%;
    border: 1px solid #d9d9d9;
    line-height: 32px;
  }
  .uploaderInput{
    width: 373px;
    height: 38px;
    position: relative;
  }
  .uploaderInput span{
    display: inline-block;
    width:114px ;
    height: 36px;
    border-radius:8px;
    -webkit-border-radius: 8px;
    background:#999999;
    font-size:16px ;
    color: #f1f1f1;
    text-align: center;
    line-height: 36px;
    position: absolute;
    left:0;
    top:0;
    z-index: -1;
  }
  .formUploader{
    margin-bottom: 0;
  }
  .formUploader input{
    -webkit-appearance: none;
    border: 0;
    opacity: 0;
  }
  .reportTips{
    font-size: 14px;
    color: #999999;
    padding-left: 135px;
  }
  .weui-cells_form {
    padding-left: 190px;
  }
  .formUploader{
    position: relative;
    display: inline-block;
    width: 128px;
    height: 36px;
    line-height: 36px;
    font-size: 18px;
    color: #ffffff;
    background: #db281b;
    border-radius: 7px;
    -webkit-border-radius: 7px;
  }
  .formUploader input{
    position: absolute;
    left: 0;
    top:0;
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  .formUploader span{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 16px;
  }
  .deletIcon{
    position:absolute;
    width: 20px;
    height: 20px;
    background: #f43530;
    right: 0;
    top: -10px;
    border-radius: 20px;
    z-index: 5;
  }
  .deletIcon::before {
    content: '';
    width: 10px;
    height: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
  }
  #uploaderFiles2 li{
    /*background-image: url("../../../static/images/timg.jpg");*/
  }
  #uploaderFiles2 li video{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url("../../static/images/timg.jpg");
    background-size: 100% 100%;
  }
  .weui-uploader__file{
    position: relative;
    display: inline-block;
    float: none;
  }
  .weui-uploader__bd{
    overflow: visible;
  }
</style>
